<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html about="easyUI" lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <title>easyUI查询列表</title>
<#include "/ftl/common/head.ftl">

</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'查询条件',split:true" style="height:100px">
    <div class="query_group">
        <label>名称:</label>
        <input class="easyui-textbox" id="q_demoName" value="" style="width: 200px"/>
    </div>
    <div class="query_group">
        <label>链接:</label>
        <input class="easyui-textbox" id="q_demoUrl" value="" style="width: 200px"/>
    </div>
    <div class="query_group">
        <label>描述:</label>
        <input class="easyui-textbox" id="q_demoDesc" value="" style="width: 200px"/>
    </div>
    <div class="query_group">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width: 60px" onclick="queryNow()">查询</a>
    </div>
    <#--<div style="width:60%;overflow:hidden;zoom:1;margin-left: 160px;">-->
    <#--</div>-->

</div>
<div data-options="region:'center',title:'查询结果',split:true" style="height:auto;background: #eee">
    <table calss="easyui-table" id="showTable" style="height:100%;width: 100%">
    </table>
</div>
<div class="easyui-dialog" id="editDialog" style="height: 300px;width: 400px;margin-right: 10px;" closed="true">
    <div class="edit_group">
        <label>名称:</label>
        <input class="easyui-textbox" id="demoName" value="" style="width: 200px"/>
    </div>
    <div class="edit_group">
        <label>链接:</label>
        <input class="easyui-textbox" id="demoUrl" value="" style="width: 200px"/>
    </div>
    <div class="edit_group">
        <label class="textareaFlag">描述:</label>
        <textarea style="width: 200px" rows="5" cols="10" id="demoDesc" value=""></textarea>
    </div>
    <div class="edit_group">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width: 60px" onclick="saveInfo()">提交</a>
    </div>
    <input type="text" id="pkid" hidden="true" value=""/>
</div>

<script>
    $(function () {
        var dataGrid = $('#showTable').datagrid({
            url: url_base + '/demo/info/getAllDemoInfo',
            method: 'post',
            singleSelect: true,
            striped: true,
            idField: 'pkid',
            loadMsg: '数据加载中，请稍后......',
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 20, 50, 100, 200],
            sortOrder: 'desc',
            frozenColumns: [[
                {field: 'pkid', checkbox: true}
            ]],
            columns: [[
                {field: 'demoName', title: '演示名称', width: 100},
                {field: 'demoUrl', title: '链接后缀', width: 100,
                    formatter: function (value, row, index) {
                        return '<a target="_blank" href='+url_base+'/study/single/demo?demoUrl='+value+'&title='+row.demoName+'>'+value+'</a>';
                    }
                },
                {field: 'demoDesc', title: '描述', width: 100},
                {field: 'status', title: '状态', width: 100},
                {
                    field: 'addedTime', title: '新增时间', width: 100,
                    formatter: function (value, row, index) {
                        return new Date(value).toLocaleDateString();
                    }
                },
                {
                    field: 'lastModifiedTime', title: '最后修改时间', width: 100,
                    formatter: function (value, row, index) {
                        return new Date(value).toLocaleDateString();
                    }
                },
                {field: 'owner', title: '拥有者', width: 100}
            ]],
            toolbar: [
                {
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        var rows = $('#showTable').datagrid('getSelections');
                        if (rows.length <= 0) {
                            $.messager.alert("提示", "请至少选择一行进行操作", "warring")
                            return false;
                        }
                        $('#demoName').textbox('setValue', rows[0].demoName);
                        $('#demoUrl').textbox('setValue', rows[0].demoUrl);
                        $('#demoDesc').val(rows[0].demoDesc);
                        $('#pkid').val(rows[0].pkid);
                        $('#editDialog').window({top: document.body.scrollTop + document.documentElement.scrollTop + 150});
                        $('#editDialog').dialog({modal: true, title: "编辑信息"});
                        $('#editDialog').window("open");
                    }
                }, '-', {
                    text: '新增',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#pkid').val("");
                        $('#editDialog').window({top: document.body.scrollTop + document.documentElement.scrollTop + 150});
                        $('#editDialog').dialog({modal: true, title: "新增"});
                        $('#editDialog').window("open");
                        return false;
                    }
                }, '-', {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        var rows = $('#showTable').datagrid('getSelections');
                        if (rows.length <= 0) {
                            $.messager.alert("提示", "请选择一行进行操作", "warring")
                            return false;
                        }
                        var url = url_base + "/demo/info/deleteDemoInfo";
                        $.ajax({
                            type: 'post',
                            url: url,
                            data: {
                                pkid: rows[0].pkid
                            },
                            success(data)
                            {
                                $.messager.alert("提示", "成功", "info");
                                queryNow();
                             return false
                            }
                        });
                    }
                }
            ]
        });
    })
    function saveInfo() {
        var demoName = $('#demoName').textbox("getValue").replace(/(^\s*)|(\s*$)/g, "");
        var demoUrl = $('#demoUrl').textbox("getValue").replace(/(^\s*)|(\s*$)/g, "");
        var demoDesc = $('#demoDesc').val().replace(/(^\s*)|(\s*$)/g, "");
        var pkid = $('#pkid').val().replace(/(^\s*)|(\s*$)/g, "");
        var data = {
            demoName: demoName,
            demoUrl: demoUrl,
            demoDesc: demoDesc
        };
        if (pkid.length == 0) {
            var url = url_base + "/demo/info/insertDemoInfo";
        } else {
            var url = url_base + "/demo/info/updateDemoInfo";
            data.pkid = pkid;
        }
        $.ajax({
            type: 'post',
            url: url,
            data: data,
            success(msg){
                $.messager.alert("提示", "成功", "info");
                $('#editDialog').window("close");
                queryNow();
            }
        });
    }
    function queryNow(){
        var data = {
            demoName:$("#q_demoName").textbox("getValue").replace(/(^\s*)|(\s*$)/g, ""),
            demoUrl:$("#q_demoUrl").textbox("getValue").replace(/(^\s*)|(\s*$)/g, ""),
            demoDesc:$("#q_demoDesc").textbox("getValue").replace(/(^\s*)|(\s*$)/g, "")
        };
        $('#showTable').datagrid('load',data);
    }
</script>
</body>
</html>